<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import EnterpriseTaskItem from '@/components/EnterpriseTaskItem.vue'
import Condition from '@/components/Condition.vue'
import TaskPreviewView from '@/views/task/TaskPreviewView.vue'
import Footor from '@/components/Footor.vue'
import PersonApplyView from '@/components/PersonApplyView.vue'
import TaskCodeListView from './task/TaskCodeListView.vue'

export default {
  components: {
    HeaderNav,
    EnterpriseTaskItem,
    TaskContainer,
    Condition,
    TaskPreviewView,
    Footor,
    PersonApplyView,
    TaskCodeListView,
  },
  data() {
    return {
      pagination: {
        page: 1,
        rows: 20,
      },
      condition: {}, // 查询条件
      conditionList: [
        {
          name: "编程语言",
          value: 'langName',  // 查询条件对应的键
          list: [
            {
              id: 1,
              name: "Java基础",
              child: {
                name: "任务模块",
                value: 'module',
                list: [
                  { id: 1, name: "基础" },
                  { id: 2, name: "流程控制" },
                  { id: 3, name: "列表/数组" },
                  { id: 4, name: "字典" },
                  { id: 5, name: "集合" },
                ]
              }
            },
            {
              id: 2,
              name: "Python基础",
              child: {
                name: "任务模块",
                value: 'module',
                list: [
                  { id: 6, name: "HTML" },
                  { id: 7, name: "CSS" },
                  { id: 8, name: "Javascript" },
                  { id: 9, name: "jQuery" },
                  { id: 10, name: "Vue" },
                ]
              }
            },
          ],
          multi: true, // 支持多选
        },
        {
          name: "难易程度",
          value: 'leave',  // 查询条件对应的键
          list: [
            { id: "简单题", name: "简单题" },
            { id: "中等题", name: "中等题" },
            { id: "难题", name: "难题" },
            { id: "选做题", name: "选做题" },
          ],
          multi: true, // 支持多选
        }
      ],
      showPreviewDialog: false, // 控制预览对话框的显示
      showDialog: false,
      showDialog2: false,
      currentTask: null, // 当前任务信息
      taskList: [   // 存储任务列表
        {
          id: 1,
          langName: "Java基础",
          leave: 2,
          taskName: "【装饰器】编写一个装饰器 logs、记录函数的执行信息、包括 函数名、参数、返回值结果",
          moduleName: "函数"
        },
        {
          id: 2,
          langName: "Java基础",
          leave: 2,
          taskName: "【装饰器】编写一个装饰器 logs、记录函数的执行信息、包括 函数名、参数、返回值结果",
          moduleName: "函数"
        },
        {
          id: 3,
          langName: "Java基础",
          leave: 2,
          taskName: "【装饰器】编写一个装饰器 logs、记录函数的执行信息、包括 函数名、参数、返回值结果",
          moduleName: "函数"
        },
        {
          id: 4,
          langName: "Java基础",
          leave: 2,
          taskName: "【装饰器】编写一个装饰器 logs、记录函数的执行信息、包括 函数名、参数、返回值结果",
          moduleName: "函数"
        },
        {
          id: 5,
          langName: "Java基础",
          leave: 2,
          taskName: "【装饰器】编写一个装饰器 logs、记录函数的执行信息、包括 函数名、参数、返回值结果",
          moduleName: "函数"
        }
      ],
    }
  },
  methods: {
    previewTask(taskId) {
      // 这里可以根据 taskId 获取任务的详细信息
      this.showPreviewDialog = true;
    },
    assignTask(taskId) {
       this.showDialog = true ;
    },
    checkTask(taskId) {
      this.showDialog2 = true ;
    },
  }
}
</script>

<template>
  <main class="enterprise-view">
    <!-- 系统导航 -->
    <HeaderNav active-index="0" class="nav-glass"></HeaderNav>
    <div class="glass-background"></div>

    <div class="content-wrapper">
      <!-- 搜索条件 -->
      <Condition :conditionList="conditionList" v-model="condition" class="condition-glass" />
      <!-- 任务列表 -->
      <div class="task-container-glass">
        <div class="task-items">
          <EnterpriseTaskItem v-for="(task, index) in taskList" :key="task.id" :id="task.id" :lang="task.langName"
            :leave="task.leave" :title="task.taskName" :module-name="task.moduleName" @preview-click="previewTask"
            @assign-click="assignTask" @check-click="checkTask">
          </EnterpriseTaskItem>
        </div>
        <!-- 添加分页插件 -->
        <div class="pagination-wrapper">
          <el-pagination background layout="prev, pager, next" hide-on-single-page :page-size="pagination.rows"
            :pager-count="11" v-model:current-page="pagination.page" :total="1000" />
        </div>
      </div>
    </div>
  </main>

  <!-- 预览对话框 -->
  <el-dialog v-model="showPreviewDialog" title="任务预览" width="70%">
    <TaskPreviewView />
  </el-dialog>

  <el-dialog v-model="showDialog" title="分配人员" width="620" top="10vh">
    <PersonApplyView />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="showDialog = false">保存</el-button>
        <el-button @click="showDialog = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="showDialog2" title="任务检查" width="70%" top="10vh">
    <TaskCodeListView />
  </el-dialog>

  <!-- 添加底部备案信息 -->
  <Footor></Footor>
</template>

<style scoped>
.enterprise-view {
  min-height: 100vh;
  position: relative;
  background: linear-gradient(135deg, #151824 0%, #1c1f35 100%);
}

.content-wrapper {
  margin: 0 auto;
  padding: 20px 50px;
  position: relative;
  z-index: 1;
}

.glass-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 1px),
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  opacity: 0.5;
  z-index: 0;
}

.nav-glass,
.condition-glass,
.task-container-glass {
  backdrop-filter: blur(12px);
  background: rgba(21, 24, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.task-container-glass {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px;
}

.task-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.task-items>.task-item {
  flex: 0 1 calc(25% - 20px);
  /* 每行展示4个任务 */
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
}

.task-items>*:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 按钮样式调整 */
:deep(.condition-glass .el-button) {
  background: none;
  /* 去掉背景色 */
  border: none;
  /* 去掉边框 */
  color: rgba(255, 255, 255, 0.9);
  /* 设置字体颜色 */
}

:deep(.condition-glass .el-button:hover) {
  background: none;
  /* 去掉 hover 背景色 */
  color: #ffffff;
  /* 设置 hover 字体颜色 */
}

:deep(.condition-glass .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

:deep(.condition-glass .el-input__inner) {
  color: #e6e8f0;
}

:deep(.condition-glass .el-input__inner::placeholder) {
  color: rgba(230, 232, 240, 0.5);
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 添加分页样式 */
:deep(.el-pagination) {
  color: white;
  /* 设置页码字体颜色为白色 */
}

:deep(.el-pagination.is-background button),
:deep(.el-pagination.is-background .el-pager li) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e6e8f0;
  /* 设置按钮和页码的字体颜色 */
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
  background: rgba(74, 128, 255, 0.2);
  border-color: rgba(74, 128, 255, 0.3);
  color: #7a9dff;
  /* 设置当前页码的字体颜色 */
}

:deep(.el-pagination.is-background button:hover),
:deep(.el-pagination.is-background .el-pager li:hover) {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
  /* 设置悬停时的字体颜色 */
}
</style>
